<!--时钟图标的弹窗组件-->
<template>
  <div>
    <div style="position:fixed; width:100%; z-index:999">
      <x-header class="custumHeader" :left-options="{backText: '',showBack: false}">
        群名修改
      </x-header>
    </div>
    <div id="modifyGroupName"
        style="
      width:100%;
      height: 100%;
      margin-top: 50px;
      background: rgba(255,255,255,0.8);
      position: fixed;
      left: 0;
      top: 0;
      z-index: 200;
      display: flex;">
      <div class="modifyGroupName_content"
          style="
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.9);
      border-radius: 20px;
      margin: auto;
      position: relative;">
        <!--弹窗头部-->
        <div class="modifyGroupName_title" style="
          padding: 5px;
          width: 100%;
          text-align:center;
          margin-top: 10%;">

          <div style="width: 80%;margin: 10px auto;border: #35495e solid 1px;padding: 20px 10px 20px 10px;border-radius: 10px">
            <div id="groupName">
              <div class="item">
                <span class="title">名称：</span>
                <span style="display: inline-block;width: 165px;font-size: medium;color: #2a6496;margin-left: 4px;padding: 3px 5px;text-align: left">{{ userInfo.detail.place}}</span>
              </div>
              <div class="item">
                <span class="title">学院：</span>
                <label>
                  <input v-model="groupNameDividedList[1]" style="border:1px gray solid;" class="input_box"/>
                </label>
              </div>
              <div class="item">
                <span class="title">
                  实验室/单位：
                </span>
                <label>
                  <input v-model="groupNameDividedList[2]" style="border:1px gray solid;" class="input_box"/>
                </label>
              </div>
              <div class="item">
                <span class="title">
                  群名：
                </span>
                <label>
                  <input v-model="groupNameDividedList[3]" style="border:1px gray solid;" class="input_box"/>
                </label>
              </div>
            </div>
            <hr style="border: 0;background-color: #2a6496;height: 1.5px;width: 100%;margin-top: 30px">
            <div id="buttons">
              <button class="this_button" @click="cancel">
                取消
              </button>
              <button class="this_button" @click="modifyGroupName">
                修改
              </button>
            </div>
          </div>
          <!--插入提示框-->
          <div v-transfer-dom>
            <alert v-model="isShowAlert"> {{alertText}}</alert>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  import {XHeader} from 'vux'
  import {mapState} from 'Vuex'
  import {setTimeout} from 'timers'
  import group from 'api/group'

  export default {
    name: 'G_modify_group_name',
    components: {
      XHeader
    },
    data () {
      return {
        groupNameDepartment: '',
        groupNameLab: '',
        groupNameSpecial: '',
        userName: '',
        alertText: '',
        isShowAlert: false,
      }
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo
      }),
      ...mapState(['groupNameDividedList', 'groupPresent'])
    },
    methods: {
      back () {
        this.$router.go(-1);
      },
      showAlert (alertText) {
        this.isShowAlert = true
        this.alertText = alertText
      },
      closeTip () {
        this.isShowAlert = false
        this.alertText = ''
      },
      cancel () {
        this.closeTip();
        this.back();
      },
      async modifyGroupName () {
        let regIllegal = /[@#\$%\^&\*]+/
        let regEmpty = /^[ ]+$/
        this.groupNameDepartment = this.groupNameDividedList[1];
        this.groupNameLab = this.groupNameDividedList[2];
        this.groupNameSpecial = this.groupNameDividedList[3];
        if (!regEmpty.test(this.groupNameDepartment) && !regEmpty.test(this.groupNameLab)
          && !regEmpty.test(this.groupNameSpecial) && !regIllegal.test(this.groupNameDepartment)
          && !regIllegal.test(this.groupNameLab) && !regIllegal.test(this.groupNameSpecial)
          && !('' === this.groupNameDepartment) && !('' === this.groupNameLab) && !('' === this.groupNameSpecial)) {
          let modifiedGroupName = this.userInfo.detail.place + '-' +
            this.groupNameDepartment + '-' +
            this.groupNameLab + '-' +
            this.groupNameSpecial;
          let groupModified = this.groupPresent;
          groupModified.detail.groupName = modifiedGroupName;
          console.log(groupModified)
          await group.postUpdateGroupInfo(groupModified)
          setTimeout(this.cancel, 300)
        } else {
          this.showAlert('群名不全或含非法字符')
          setTimeout(this.closeTip, 1400)
        }
      }
    },
  }
</script>
<style scoped>
  .input_box {
    padding: 3px 5px;
  }

  .input {
    font-size: medium;
  }

  .title {
    text-align: left;
    padding-left: 20px;
    color: grey;
    display: inline-block;
    width: 100px;
  }

  .item {
    margin-top: 10px;
  }

  .this_button {
    width: 120px;
    height: 35px;
    border: none;
    color: white;
    background: #35495e;
    text-align: center;
    outline: none;
    border-radius: 5px;
    margin: 20px auto;
  }
</style>
